<template>
    <AppHeader title="书籍详情" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
      <div class="book-details">
    <div class="top">
      <van-image class="img"
       :src="state.dataForm.cover_full"
      />
      <div class="info">
        <div class="t0 ellipsis-multiline2">{{state.dataForm.productName || '--'}}</div>
        <div class="t1">适用于：{{state.dataForm.gradeName || '--'}}</div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="left">内容目录 <span><i>已更新{{state.chapterlist.length}}个章节</i>/共{{state.dataForm.content }}章节</span></div>
        <div>
          <van-icon name="descending" @click="orderChange"/>
        </div>
      </div>
      <div class="list">
        <van-cell :title="i.name" is-link v-for="i in state.chapterlist" :key="i.id" @click="cellClick(i)"/>
      </div>
    </div>

  </div>

  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick ,ref} from "vue";
import { useRouter ,useRoute} from "vue-router";
import { detail,chapterlist } from "@/api/writtenTest";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
const unitlist = []
const router = useRouter();
const order = ref('0') //1升，0降
const route = useRoute();
const state = reactive({
  loading: {
    page: false,
  },
  dataForm:{
    productName:'',
    gradeName:'',
    cover_full:""
  },
  chapterlist: [],
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 4,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
});
const cellClick = (item) => { 
  router.push({
    path: "/writtenTest/detailsUnit",
    query: { id: item.id,productId:item.productId,name:item.name },
  });
  sessionStorage.setItem('query',JSON.stringify( { id: item.id,productId:item.productId,name:item.name }))
}
onMounted(async ()=>{
  if(route.query.id){
    await detail({id: route.query.id}).then(res=>{
      state.dataForm = res.data
      state.dataForm.content = JSON.parse(res.data.packageinfo.replace(/'/g, '"'))[1].content
    })
    await blackplumChapter('asc')
   
  }
}) 
const orderChange =() =>{
  var t = order.value === '1' ? 'asc' : 'desc'
  order.value = t === 'asc' ? '0' : '1'  //点击之后重新赋值
  blackplumChapter(t)
}
const blackplumChapter = (order)=>{
  var params = {
    order,
    id: route.query.id,
    pageSize:state.dataForm.content.slice(0,state.dataForm.content.length - 1)
  }
  chapterlist(params).then(res=>{
    state.chapterlist = res.data
  })
}
const onClickLeft = () => {
  router.go(-1);
};
const { loading, mescrollConfig,questionPopupShow } = toRefs(state);
</script>
<style scoped lang="scss">
.book-details{
  background: #ffffff;
  height: 100%;
  padding-top: 44px;
  padding-bottom: 20px;
  overflow: scroll;
  .top{
    display: flex;
    padding: 10px 10px 15px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5e5;
    .img{
      width: 70px;
      height: 84px;
      margin-right: 15px;
    }
    .info{
      .t0{font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 24px;
text-align: left;
font-style: normal;
margin: 10px 0 15px;}
      .t1{
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #8E8E8E;
line-height: 24px;
text-align: left;
font-style: normal;
      }
    }
  }
  .content
  {
    .title{
      line-height: 22px;
      padding: 15px 10px;
      display: flex;
      vertical-align: middle;
      justify-content: space-between;
      .left
      {
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
span{
  color: #8E8E8E;
  i{
    font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #0CB76C;
line-height: 22px;
text-align: left;
font-style: normal;
  }
}
      }
      .van-icon{
        color:#0CB76C;
      }
    }
  }
}
</style>
